import styled from "@emotion/styled";
import { Spin, Typography, Button } from "antd";
import React from "react";
export const Row = styled.div<{
  gap?: number | boolean;
  between?: boolean;
  marginBottom?: number;
}>`
  display: flex;
  align-items: center;
  justify-content: ${(props) => (props.between ? "space-between" : undefined)};
  > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: ${(props) =>
      typeof props.gap === "number"
        ? props.gap + "rem"
        : props.gap
        ? "2rem"
        : undefined};
  }
`;
const FullPage = styled.div`
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  position: relative;
`;
export const FullLoading = () => (
  <FullPage>
    <Spin
      size={"large"}
      style={{
        position: "absolute",
        left: "50%",
        top: "50%",
        transform: "translate(-50%,-50%)",
      }}
    ></Spin>
  </FullPage>
);
export const FullErrorPage = ({ error }: { error: Error | null }) => (
  <FullPage>
    <ErrorBox error={error} />
  </FullPage>
);
export const ButtonNoPadding = styled(Button)`
  padding: 0;
`;
//类型守卫
const isError = (value: any): value is Error => {
  return value?.message;
  //如果符合这个message条件那就确认为error类型
};
export const ErrorBox = ({ error }: { error: unknown }) => {
  if (isError(error))
    return (
      <Typography.Text type={"danger"}>
        {error?.message || "出错了"}
      </Typography.Text>
    );

  return null;
};
